import { getVideoImage } from '@/utils/utils';

import { ITableRow, IOperateHandle } from '../interface';

/**
 * 待下发
 */
const WAITSEND = [0, 4];
/**
 * 已下发
 */
const SENDED = [1, 3];
/**
 * 已结束
 */
export const ENDED = [5];

/**
 * 创建失败
 */
const BAD = [2];

const statusColorOption = {
    // 待下发
    0: '#2FB6E4',
    // 创建失败的不会在列表中展示,后端单独记录。因此前端不需要任何处理
    // 2: '创建失败',
    // 已下发
    1: '#32D1AD',
    // 待下发
    3: '#32D1AD',
    // 待下发
    4: '#2FB6E4',
    // 已结束
    5: '#F14144'
};

/**
 * Tootip鼠标移入是否禁用
 * @param content Tootip在单元格展示的文本
 * @returns {Boolean}
 */
const useTootipDisabeld = (content: string) => {
    /**
     * 在创建一个div，来判断是否会超出🙄️(轻喷)
     * 下面一大堆样式是模拟放到cell中的效果。
     */
    let cellElement: HTMLDivElement | null = document.createElement('div');
    cellElement.style.width = '216px';
    cellElement.className = 'moment_tooltip zw-text-ellipsis2';
    cellElement.innerHTML = content;
    cellElement.style.zIndex = '-9999999999';
    cellElement.style.opacity = '0';
    cellElement.style.position = 'absolute';
    cellElement.style.left = '0';
    cellElement.style.top = '0';
    document.body.appendChild(cellElement);

    let disabled = true;

    /** 说来也奇怪，为啥非要加个3才算出来的准确 */
    const linetHight = 3;
    if (cellElement.clientHeight + linetHight < cellElement.scrollHeight) {
        disabled = false;
    }

    // 用完删除资源
    document.body.removeChild(cellElement);
    // 垃圾回收
    cellElement = null;
    return disabled;
};

/**
 * 表格配置列
 */
export const qwFirendtableOption = (operateHandle: IOperateHandle) => [
    {
        prop: 'title',
        label: '任务名称',
        minWidth: 130,
        showOverflowTooltip: true
    },
    {
        prop: 'moment_content.content',
        label: '内容',
        minWidth: 240,
        render({ row }: ITableRow) {
            // 处理用户输入的时候有换行的问题
            const content = String(row.moment_content.content || '')
                .replace(/</g, `&lt;`)
                .replace(/>/g, `&gt;`)
                .replace(/\n/g, `<br />`);

            const disabled = useTootipDisabeld(content);
            return (
                <el-tooltip
                    effect="dark"
                    placement="top"
                    show-after={800}
                    disabled={disabled}
                    popper-class="auto_width auto_height">
                    {{
                        default: () => <div class="moment_tooltip zw-text-ellipsis2" v-html={content}></div>,
                        content: () => (
                            <div
                                class="zw-common-scrollbar"
                                style={{ overflow: 'auto', maxHeight: '200px' }}
                                v-html={content}></div>
                        )
                    }}
                </el-tooltip>
            );
        }
    },
    {
        prop: 'moment_content.attachment',
        label: '图片/视频/链接',
        width: 240,
        render({ row }: ITableRow) {
            // 未选择素材渲染空
            if (!row.moment_content?.attachment?.length) {
                return '--';
            }
            // 渲染图片
            const renderimage = () => {
                const images = row.moment_content.attachment.sort((a, b) => a.sort - b.sort).map(item => item.url);
                const [src] = images;
                return (
                    <el-badge value={images.length} max={9}>
                        <el-image src={src} lazy preview-src-list={images} preview-teleported >
                            {{
                                error: () => {
                                    return (
                                        <el-image src="//img.static-keyid.cn/toolspace/scrm/2023/09/1695815316881ocdqumpef0dfuk8m.png" />
                                    );
                                }
                            }}
                        </el-image>
                    </el-badge>
                );
            };
            // 渲染视频
            const rendervideo = () => {
                const { url } = row.moment_content.attachment[0];
                return (
                    <div class="attachment-content-video" onClick={() => window.open(url)}>
                        <el-image
                            class="video-play"
                            src="//img.static-keyid.cn/toolspace/scrm/2023/09/16950360444828064pgh905i0j7md.png"></el-image>
                        <el-image lazy src={getVideoImage(url, 46, 46)}>
                            {{
                                error: () => {
                                    return (
                                        <el-image src="//img.static-keyid.cn/toolspace/scrm/2023/09/1695721780763mo89uo1sdqpp3r6z.png" />
                                    );
                                }
                            }}
                        </el-image>
                    </div>
                );
            };

            // 渲染链接
            const renderlink = () => {
                const { url, link } = row.moment_content.attachment[0];
                return (
                    <div class="attachment-content-link">
                        <el-image src={url}>
                            {{
                                error: () => {
                                    return (
                                        <el-image src="//img.static-keyid.cn/toolspace/scrm/2023/09/1695721409722njc3nmed75g0kbaa.png" />
                                    );
                                }
                            }}
                        </el-image>
                        <div class="zw-text-ellipsis"> {link?.link_title || '--'} </div>
                    </div>
                );
            };

            // 获取渲染类型
            const renderType = row.moment_content.attachment[0].type;
            // 渲染类型的策略
            const renderStrategy = {
                renderimage,
                rendervideo,
                renderlink
            };

            return (
                <div class={`attachment-content ${renderType === 'image' ? 'image-content' : ''}`}>
                    {renderStrategy[`render${renderType}`]?.() ?? '--'}
                </div>
            );
        }
    },
    {
        prop: 'sync_wx_status_name',
        label: '任务状态',
        minWidth: 140,
        render({ row }: ITableRow) {
            return (
                <div
                    class="status-point"
                    style={{
                        '--status-bgcolor': statusColorOption[row.sync_wx_status] ?? '#ccc'
                    }}>
                    {row.sync_wx_status_name}
                </div>
            );
        }
    },
    {
        prop: 'sync_wx_time',
        label: '下发时间',
        minWidth: 200,
        showOverflowTooltip: true
    },
    {
        prop: 'close_time',
        label: '结束时间',
        minWidth: 200,
        showOverflowTooltip: true
    },
    {
        prop: 'work_user_send_num',
        label: '已发表成员数',
        width: 120,
        showOverflowTooltip: true
    },
    {
        prop: 'work_user_not_send_num',
        label: '未发表成员数',
        width: 120,
        showOverflowTooltip: true
    },
    {
        prop: 'created_name',
        label: '创建人',
        width: 120,
        showOverflowTooltip: true
    },
    {
        prop: 'created_at',
        label: '创建时间',
        minWidth: 200,
        showOverflowTooltip: true
    },
    {
        prop: 'operate',
        label: '操作',
        width: 200,
        fixed: 'right',
        isOperate: true,
        option: [
            {
                name: '查看',
                click: operateHandle.detail
            },
            {
                name: '编辑',
                click: operateHandle.edit,
                // 经后端沟通，只有0, 4待下发和2创建失败的才可以编辑。
                isRender: ({ row }: ITableRow) => [...WAITSEND, ...BAD].includes(row.sync_wx_status)
            },
            {
                name: '数据',
                click: operateHandle.stat,
                isRender: ({ row }: ITableRow) => [...SENDED, ...ENDED].includes(row.sync_wx_status)
            },
            {
                name: '复制',
                click: operateHandle.copy
            },
            {
                name: '删除',
                click: operateHandle.delete,
                isRender: ({ row }: ITableRow) => [...WAITSEND, ...ENDED, 2].includes(row.sync_wx_status)
            },
            {
                name: '结束',
                click: operateHandle.end,
                isRender: ({ row }: ITableRow) => SENDED.includes(row.sync_wx_status)
            },
            {
                name: '一键提醒',
                click: operateHandle.remind,
                isRender: ({ row }: ITableRow) =>
                    Boolean(SENDED.includes(row.sync_wx_status) && row.work_user_not_send_num)
            }
        ]
    }
];
